<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>
        table {
            width: 600px;
            height: 400px;
            margin: 10px auto;
            border: 1px solid #000;
            border-collapse: collapse;
            text-align: center;
        }
        
        table td {
            border: 1px solid #000;
        }
        
        table th {
            border: 1px solid #000;
        }
        
        tfoot {
            height: 65px;
            background-color: #eee;
        }
    </style>
</head>

<body>
    <div id="app">
        <table>
            <thead>
                <tr>
                    <th v-for="(title, tidx) in titles" :key="tidx">{{title}}</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(person,index) in persons" :key="index">
                    <td>{{person.name}}</td>
                    <td>{{person.math}}</td>
                    <td>{{person.chinese}}</td>
                    <td>{{person.english}}</td>
                    <td>{{getAllScroe(person)}}</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td>平均分</td>
                    <td>{{mathAvg}}</td>
                    <td>{{chineseAvg}}</td>
                    <td>{{englishAvg}}</td>
                    <td>{{mathAvg + chineseAvg + englishAvg}}</td>
                </tr>
            </tfoot>
        </table>
    </div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            titles: ['姓名', '数学成绩', '语文成绩', '英语成绩', '总成绩'],
            persons: [{
                name: '赵云',
                math: 97,
                chinese: 89,
                english: 67
            }, {
                name: '关羽',
                math: 67,
                chinese: 52,
                english: 98
            }, {
                name: '张飞',
                math: 72,
                chinese: 87,
                english: 89
            }, {
                name: '马超',
                math: 92,
                chinese: 87,
                english: 59
            }, {
                name: '黄忠',
                math: 47,
                chinese: 85,
                english: 92
            }, ]
        },
        methods: {
            getAllScroe(item) {
                let count = 0
                for (let key in item) {
                    if (key != 'name') {
                        count += item[key]
                    }
                }
                return count
            }
        },
        computed: {
            mathAvg() {
                return this.persons.reduce((prev, current) => {
                    return prev + current.math
                }, 0) / this.persons.length
            },
            chineseAvg() {
                return this.persons.reduce((prev, current) => {
                    return prev + current.chinese
                }, 0) / this.persons.length
            },
            englishAvg() {
                return this.persons.reduce((prev, current) => {
                    return prev + current.english
                }, 0) / this.persons.length
            }
        }
    })
</script>

</html>